<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sevilla28 - App oficial para móviles</title>
	<link rel="stylesheet" href="../css/sevilla28.css" />
	<link rel="stylesheet" href="../css/jquery.mobile.structure-1.1.1.min.css" />
	<link rel="stylesheet" href="../css/sevilla28_specific.css" />
	<script src="../js/jquery-1.8.0.min.js"></script>
	<script src="../js/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
		<div data-role="page" data-theme="a">
			<div data-role="header" data-position="inline">
				<h1><img src="../img/logo.png" width="100%"></h1>
			</div>
			<div id="oracion" class="centrado">
				<label for="slider-1">¿Cuántas canciones necesitas para tu oración?:</label>
				<input type="range" name="slider" id="slider" value="4" min="1" max="15" />
				<a href="" data-role="button" id="botongenerar">Generar oración</a>
			</div>
			<div id="cancionesoracion"></div>
			<table class="tablaCanciones oculto" width="98%" align="center" id="tablaReproductor">
				<tr>
					<td class="text">
						<div class="centrado">
							<img src="../img/stop.png" width="35" height="35" onclick="window.Cantoral.stopMusic();">
							<img src="../img/playpause.png" width="35" height="35" onclick="window.Cantoral.pauseResume();">
							<img src="../img/shuffle.png" width="35" height="35" onclick="window.Cantoral.shuffleSong();">
						</div>
					</td>
				</tr>
			</table>
			<div data-role="content"data-position="inline">
				<p class="centrado"><a href="http://www.facebook.com/home.php?#!/profile.php?id=100001435977096&amp;ref=ts" target="_blank"><img src="../img/facebook.png" width="50" height="50" border="0" title="Estamos en facebook"></a>
					<a href="http://www.youtube.com/user/sevilla28SR" target="_blank"><img src="../img/youtube.png" width="50" height="50" border="0" title="Nuestro canal de youtube"></a>
					<a href="mailto:sevilla28sr@gmail.com"><img src="../img/mail.png" width="50" height="50" border="0" title="Mandanos un correo"></a>
					<a href="http://www.tuenti.com/#m=Profile&amp;func=index&amp;user_id=67007793" target="_blank"><img src="../img/tuenti.png" width="50" height="50" border="0" title="Siguenos en tuenti"></a>
					<a href="http://twitter.com/Sevilla28" target="_blank"><img src="../img/twi.png" width="50" height="50" border="0" title="Ahora tambien en twitter"></a>
				</p>
			</div>
			<div id="copyright" class="centrado">Candy & Pocho Copyright 2012</div>
			<script type="text/javascript">
				$("#botongenerar").bind("click", function() {
					$("#cancionesoracion").empty();
					$("#cancionesoracion").append('<table width="98%" align="center" class="tablaCanciones"><thead id="insertarCanciones"><tr><th class="header">Canción</th><th class="header">Multimedia</th></tr></thead></table>');
					var numCanciones = $("#slider").attr("value");
					var i = 0;
					while(i<numCanciones) {
						var nombreCancion = window.Cantoral.getCancion('ORACION');
						var idCancion = window.Cantoral.getIDFromName(nombreCancion);
						if(window.Cantoral.hasSong(idCancion) || window.Cantoral.hasVideo(idCancion)) {
							if(window.Cantoral.hasSong(idCancion) && window.Cantoral.hasVideo(idCancion)) {
								//Cancion y video
								$("#insertarCanciones").append('<tr><td width="80%" class="text" onclick="window.Cantoral.playMusicFromID(' +idCancion +');">' +nombreCancion +'</td><td width="20%" align="center"><img src="../img/altavoz.jpg" height="35" width="35" border="0" onclick="window.Cantoral.playMusicFromID(' +idCancion +');"><a href="http://www.youtube.com/watch?v=' +window.Cantoral.getYoutubeID(idCancion) +'" onclick="window.Cantoral.stopMusic();"><img src="../img/claqueta.jpg" height="35" width="35"></a></td></tr>');
							} else if (window.Cantoral.hasSong(idCancion)) {
								//Solo cancion
								$("#insertarCanciones").append('<tr><td width="80%" class="text" onclick="window.Cantoral.playMusicFromID(' +idCancion +');">' +nombreCancion +'</td><td width="20%" align="center"><img src="../img/altavoz.jpg" height="35" width="35" border="0" onclick="window.Cantoral.playMusicFromID(' +idCancion +');"></td></tr>');
							} else {
								//Solo video
								$("#insertarCanciones").append('<tr><td width="80%" class="text">' +nombreCancion +'</td><td width="20%" align="center"><a href="http://www.youtube.com/watch?v=' +window.Cantoral.getYoutubeID(idCancion) +'" onclick="window.Cantoral.stopMusic();"><img src="../img/claqueta.jpg" height="35" width="35"></a></td></tr>');
							}
						} else {
							//Sin multimedia
							$("#insertarCanciones").append('<tr><td width="80%" class="text">' +nombreCancion +'</td><td width="20%" align="center"></td></tr>');
						}
						i++;
					}
					$("#tablaReproductor").removeClass("oculto");
				});
			</script>
		</div>
</body>
</html>